<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>他人主页</title>
  <link rel="stylesheet" href="../static/css/other.css" th:href="@{/css/other.css}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <!--    引入me.css-->
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini">
  <div class="ui container"> <!-- 加一个容器 -->
    <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
      <h2 class="ui white header item">ShopSystem</h2> <!-- 蓝绿色标题 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="home icon"></i>首页</a> <!-- icon表示图表 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="edit outline icon"></i>记录</a>
      <a href="#" class="m-item m-mobile-hide item"><i class="info icon"></i>我的</a>
      <div class="m-top-right m-mobile-hide item m-item" style="margin-top: 5px"> <!-- 靠右 -->
        <div class="ui dropdown item">
          <div class="text">
            <img src="../static/images/店铺1.jpg" th:src="@{/images/IMG_6361.JPG}"
                 alt="" class="ui avatar image">
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a href="#" th:href="@{/admin/logout}" class="item">退出</a>
            <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<div class="m-container-large m-padded-tb-big" style="width: 1100px !important;" id="contentDiv">
  <div class="ui container">
    <div class="ui stackable grid">
      <div class="four wide column">
        <div class="ui segment">
          <div style="margin-left: 10px">
            <h4>其他信息</h4>
            学校：<p class="m-inline-block" th:text="${user.school}">江西财经大学</p><br>
            专业：<p class="m-inline-block" th:text="${user.filed}">软件工程</p><br>
            入学年份：<p class="m-inline-block" th:text="${user.enrollmentTime}">2020</p><br>
            当前学历：<p class="m-inline-block" th:text="${user.academic}">本科</p>
          </div>
        </div>

        <div class="ui segment">
          <div style="margin-left: 10px">
            <h4>个人描述</h4>
            <p th:text="${user.description}">一息尚存，战斗不止！</p>
          </div>
        </div>

        <div class="ui segment">
          <div style="margin-left: 10px">
            <h4>加入的社区</h4>
            <div th:if="${forums.size() > 0}">
              <a style="color: #0a0a0a" th:each="forum, iterStat : ${forums}"
                 th:href="@{/forum/fblog/{id}(id=${forum.id})}" th:if="${iterStat.index} &lt;= 2"
                 target="_blank">
                <p style="padding-bottom: 10px" th:text="${forum.forumName}">GuideSystem学习</p>
              </a>
            </div>
            <p style="margin-bottom: 10px; color: #8b95a5" th:unless="${forums.size() > 0}">暂无</p>
            <p th:if="${forums.size() > 3}" style="padding-bottom: 6px">&nbsp;. . .</p>
          </div>
        </div>

        <div class="ui segment">
          <div style="margin-left: 10px">
            <h4>发布的帖子</h4>
            <div th:if="${blogs.size() > 0}">
              <a style="color: #0a0a0a;" th:each="blog, iterStat : ${blogs}"
                 th:href="@{/blog/{id}(id=${blog.id})}" th:if="${iterStat.index} &lt;= 2"
                 target="_blank">
                <p style="padding-bottom: 10px" th:text="${blog.title}">这是我生命中最美丽的一天</p>
              </a>
            </div>
            <p style="margin-bottom: 10px; color: #8b95a5" th:unless="${blogs.size() > 0}">暂无</p>
            <p th:if="${blogs.size() > 3}" style="padding-bottom: 6px">&nbsp;. . .</p>
          </div>
        </div>

        <div class="ui segment">
          <div style="margin-left: 10px">
            <h4>收藏的社区帖子</h4>
            <div th:if="${collectionBlogs.size() > 0}">
              <a style="color: #0a0a0a" th:each="blog, iterStat : ${collectionBlogs}"
                 th:href="@{/blog/{id}(id=${blog.id})}" th:if="${iterStat.index} &lt;= 2"
                 target="_blank">
                <p style="padding-bottom: 10px" th:text="${blog.title}">这是我生命中最美丽的一天</p>
              </a>
            </div>
            <p style="margin-bottom: 10px; color: #8b95a5" th:unless="${collectionBlogs.size() > 0}">暂无</p>
            <p th:if="${collectionBlogs.size() > 3}" style="padding-bottom: 6px">&nbsp;. . .</p>
          </div>
        </div>

        <div class="ui segment">
          <div style="margin-left: 10px">
            <h4>收藏的考研博客</h4>
            <div th:if="${collectionResources.size() > 0}">
              <a style="color: #0a0a0a" th:if="${iterStat.index} &lt;= 2"
                 th:each="resource, iterStat : ${collectionResources}" th:href="@{/resource/{id}(id=${resource.id})}"
                 target="_blank">
                <p style="padding-bottom: 10px" th:text="${resource.title}">这是我生命中最美丽的一天</p>
              </a>
            </div>
            <p style="margin-bottom: 10px; color: #8b95a5" th:unless="${collectionResources.size() > 0}">暂无</p>
            <p th:if="${collectionResources.size() > 3}" style="padding-bottom: 6px">&nbsp;. . .</p>
          </div>
        </div>
      </div>
      <div class="eight wide column">
        <img src="../static/images/店铺1.jpg" th:src="@{${user.avatar}}" alt=""
             class="ui rounded image">
        <div class="right aligned column" style="text-align: right; position: relative; margin-top: 5px">
          <a th:href="@{/picture/list/{id}(id=${user.id})}" style="font-weight: bold;" target="_blank">浏览Ta的照片墙 <i
              class="right arrow icon"></i></a>
        </div>
      </div>
      <div class="four wide column">
        <div class="ui segment">
          <div style="margin-top: 20px; margin-left: 10px; font-weight: bold" class="m-padded-lr">Hi！你好</div>
          <div style="margin-top: 20px; margin-left: 10px">
            用户名：<p class="m-inline-block" th:text="${user.username}">卡夫卡</p><br>
            用户昵称：<p class="m-inline-block" th:text="${user.nickname}">2001-01-12</p><br>
            性别：<p class="m-inline-block" th:text="${user.sex}">男</p><br>
            个签：<p class="m-inline-block"
                    th:utext="${#strings.length(user.signature) > 11 ? user.signature.substring(0, 10) + '...' : user.signature}">
            不要停止我的音乐</p><br>
            所在地：<p class="m-inline-block" th:text="${user.address}">江西南昌</p><br>
            理想院校：<p class="ui blue basic label m-padded-mini m-text-thin"
                        th:text="${user.dreamCollege}" style="margin-bottom: 10px">麻省理工大学</p>
          </div>
        </div>
        <div class="ui segment">
          <div class="ui centered card" style="width: 160px; margin-top: 10px">
            <!-- 指定宽度时居中使用centered -->
            <img src="../static/images/WeChat1.jpg" th:src="@{/images/WeChat1.jpg}" alt=""
                 class="ui rounded images" height="155">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<br>

<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <!-- vertical:垂直的 segment:条横 inverted:倒置的 -->
  <div class="ui center aligned container"> <!-- center aligned:居中 aligned:使成为一条线-->
    <div class="ui inverted divided stackable grid"> <!-- inverted divided grid:格线分成16份 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">消费者权益</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin">消费者热线：3838438</span>
          <span class="item m-text-thin">外卖热线：5201314</span>
          <span class="item m-text-thin">已获得食品安全局认证</span>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">商家加盟</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">食品外卖开店申请</a>
          <a href="#" class="item m-text-thin">美食商家入驻(非外卖)</a>
          <a href="#" class="item m-text-thin">合作/招聘</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">联系我</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin" style="height: 28px">邮箱: 1923326384@qq.com</span>
          <span class="item m-text-thin">QQ: 1923326384</span>
        </div>
      </div>

      <!-- 分成七列 -->
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin">企业文化</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-text-lined">
          消费者第一，商家第二 | 诚信诚实正直，言出必践言行一致 | 以“吃”为核心，建设生活服务业从需求侧到供给侧的多层次科技服务平台。
        </p>
      </div>

    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2022-05-29 HanYuFan Designed by HanYuFan</p>
  </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
</script>
</body>
</html>
